<template>
    <div class="app-container">
      <div class="material-top"> 
         <div class="material-title">担保产品详情</div>
         <div>
            <el-button v-if="formData.status==1" type="primary" color="#fff" @click="aduitCheck"  :icon="FolderChecked">审核</el-button>
             <el-button  color="#fff" @click="goBack"  :icon="ArrowLeft">返回</el-button>
         </div>
      </div>
      <div class="material-main">
         <div class="material-step">
            <el-steps  :active="active" >
                <el-step title="产品基本信息" />
                <el-step title="产品参数配置" />
                <el-step title="申请材料配置" />
            </el-steps>
         </div>
         <div class="material-form" v-show="active==0">
         <el-form :model="formData" ref="addProducts"  label-width="120px" >
            <el-row>
                  <el-col :span="22" :offset="1">
                     <div class="form-title">
                        基本信息
                     </div>
                  </el-col>
               </el-row>
            <el-row >
               <el-col :span="12" :offset="2">
                  <el-form-item label=" 产品名称" prop="name"><el-input  readonly v-model="formData.name" /></el-form-item>
                  <el-form-item label="担保类型" prop="type"> 
                           <el-select disabled   v-model="formData.type"  placeholder="请选择" >
                                        <el-option
                                        v-for="item in twoArr"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        />
                                    </el-select>
                  </el-form-item>
                  <el-form-item label="产品封面" prop="topic">
                     <ImageUpload v-model="imageUrls" ></ImageUpload>
                  </el-form-item>
                  <el-form-item label="产品介绍" prop="topic"> <el-input  readonly  rows="5" type="textarea" v-model="formData.topic" /> </el-form-item>
                  <el-form-item label="产品亮点" prop="desc_str"> <el-input   readonly rows="5" type="textarea" v-model="formData.desc_str" /> </el-form-item> 
                  <el-form-item label="产品标签">
                     <el-checkbox-group  disabled v-model="formData.label">
                     <el-checkbox label="新品" name="type" />
                     <el-checkbox label="推荐" name="type" />
                     <el-checkbox label="精品" name="type" />
                     </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="年利率" prop="year_rate"> <el-input readonly  v-model="formData.year_rate" /> </el-form-item> 
                  <el-form-item label="日利率" prop="daliy_rate"> <el-input readonly  v-model="formData.daliy_rate" /> </el-form-item> 
               </el-col>
               </el-row>
               <el-row>
                  <el-col :span="22" :offset="1">
                     <div class="form-title">
                        担保参数
                     </div>
                  </el-col>
               </el-row>
               <el-row>
                  <el-col :span="12" :offset="2">
                  <el-form-item label="放款通道" prop="channel">
                     <el-radio-group disabled  v-model="formData.channel">
                     <el-radio label="1" >委托银行放款</el-radio>
                     <el-radio label="2" >金融机构放款</el-radio>
                     </el-radio-group>
                  </el-form-item>
                  <el-form-item label="担保额度范围" prop="base_quota">
                     <el-row :gutter="20">
                        <el-col :span="11">
                           <el-input readonly 
                           v-model="formData.base_quota"
                           label="最低金额"
                           type="number"
                           placeholder="最低金额"
                           />
                        </el-col>
                        <el-col :span="2">
                           -
                        </el-col>
                        <el-col :span="11">
                           <el-input readonly 
                           type="number"
                           v-model="formData.max_quota"
                           label="最高金额"
                           placeholder="最高金额"
                           />
                        </el-col>
                     </el-row>
                     </el-form-item>
                  <el-form-item label="还款方式">
                     <el-checkbox-group  disabled v-model="formData.method">
                        <el-checkbox label="1" >等额本息</el-checkbox>
                     <el-checkbox label="3" >等本等息</el-checkbox>
                     <el-checkbox label="4" >先息后本</el-checkbox>
                     <el-checkbox label="5" >一次性还息付本</el-checkbox>
                     </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="担保期限" prop="stages">
                     <el-checkbox-group disabled  v-model="formData.stages">
                     <el-checkbox v-for="(item,index) in monthList" :key="index" :label="item.id">{{ item.loan_type }}</el-checkbox>
                     </el-checkbox-group>
                  </el-form-item>
               </el-col>
            </el-row>
       </el-form>
       </div>
       <div class="preview-form" v-show="active==1">
         <el-row justify="center">
            <el-col :span="21">
               <div class="form-title">
                        产品参数设置
                     </div>
                     <el-form-item  label="选择产品参数设置">
                        <el-tree-select
                        v-model="valueSelect"
                        :data="dataSelect"
                        multiple
                        :render-after-expand="false"
                        show-checkbox
                        disabled
                        check-strictly
                        @change="treeChange"
                     />
                     </el-form-item>
                     <div class="replenish-title">
                        <div class="title-tag">补充参数说明：</div> 
                        <div>授权认证信息、补充资产信息可根据实际产品业务需要设置，设置后用户在申请该产品担保时，可填写更完善的参数。</div>
                     </div>
                     <div class="form-title"> 产品参数预览</div> 
                     <el-tabs
                        v-model="activeName"
                        type="card"
                        class="demo-tabs"
                        @tab-click="handleClick"
                     >
                     <el-tab-pane 
                     v-for="(item,index) in tabNames" 
                     :key="index" 
                     :label="item.name" 
                     :name="item.id">
                     <Tabpanes 
                     v-for="(itm ,inx) in item.list" 
                     :key="inx" 
                     :personLength="item.list.length"
                     :personList="itm"
                     :personView="false"
                     />
                     </el-tab-pane>
                  </el-tabs>
            </el-col>
         </el-row>
       </div>
       <div class="apply-form" v-show="active==2">
         <el-row justify="center">
            <el-col :span="21">
               <div class="apply-state">说明： 补充申请材料是指用户在申请该产品担保时，需要额外提交的材料附件；可以针对自身的产品业务配置不同的材料类型。</div>
               <div class="form-title"> 产品申请材料</div>
               <p>请设置补充申请材料</p>
               <el-transfer disabled  v-model="formData.materials" :data="dataArr" :titles="['材料列表', '已设置']" />
            </el-col>
            <div>
            <el-checkbox  disabled v-model="formData.materials_must">以上设置的材料，是否要求用户必须提交</el-checkbox>
            </div>
         </el-row>
         </div>
         <div class="product-issue" v-if="active==3">
           <Release :viewShow ="true" v-model='formData.org_id' ></Release>
      </div>
      </div>
       <el-form label-width="100px">
          <div style="text-align: center;margin-left:-120px;margin-top:30px;">
             <el-button type="primary" v-if="active!=0" @click="preStep()">上一步，{{ preText }}</el-button>
             <el-button type="primary" v-if="active!=3" @click="nextStep()">下一步， {{nextText}}</el-button>
          </div>
       </el-form>
       <!-- 产品审核 -->
      <el-dialog title="产品审核" v-model="checktShow" width="600px" append-to-body>
         <el-form ref="depttRef" :model="formt" :rules="rulest" label-width="80px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="产品名称" prop="loanName">
                     <el-input disabled v-model="formt.loanName" placeholder="请输入部门名称" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="16">
                  <el-form-item label="审核结论" prop="audit">
                     <el-radio-group v-model="formt.audit">
                     <el-radio label="1"  value="1" >审核通过</el-radio>
                     <el-radio label="2" value="2">审核不通过</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>

            </el-row>
               <el-row>
               <el-col :span="12">
                  <el-form-item label="反馈详情" prop="details">
                     <el-input v-model="formt.details" rows="5" type="textarea" placeholder="请输入内容" maxlength="20" />
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitFormt">确 定</el-button>
               <el-button @click="cancelt">取 消</el-button>
            </div>
         </template>
      </el-dialog>
    </div>
 </template>
 
 <script setup name="AddMaterial">
 import {
  oneProduct,
  queryMonthProduct,
  auditProduct
} from "@/api/product/product";
import {fileHttpUrl} from "@/api/file"
import { listMaterial} from "@/api/product/material"
import {  queryParameter } from "@/api/product/parameter";
 import { ArrowLeft ,FolderChecked} from  '@element-plus/icons-vue'
 import Tabpanes from'@/components/Tabpanes'

 import Release from'@/components/Release'
import { onActivated, reactive } from 'vue';
 const active = ref(0);//进步器
 const route = useRoute();
 const { proxy } = getCurrentInstance();
 const checktShow = ref(false);
 const typeOne = ref();
 const  oneArr = ref([ { value: "1",label: "个人"} ]);
 const imageUrls=ref([])
 const parameterToall = ref([]);
 const valueSelect = ref();
 const activeName = ref('')
 const tabNames = ref([]) 
const dataSelect = ref([])
 const twoArr = ref([
 {
      value:"1",
    label:"个人信用"
  },{
    value:"2",
    label:"个人分期"
    },{
    value:"3",
    label:"个人分期"
    },{
    value:"4",
    label:"个人抵押"
    },{
    value:"5",
    label:"企业信用"
    },{
    value:"6",
    label:"企业分期"
    },{
    value:"7",
    label:"企业租赁"
    }
    ]);
 const  preText = ref('产品基本信息');
 const  nextText = ref('产品参数配置');
 const data = reactive({
   formData:{},  
   formt:{},
   rulest:{
      audit: [{ required: true, message: "请选择审核结论", trigger: "blur" }],
   }
 });
 const monthList = ref([])
const {formData,formt,rulest} = toRefs(data)
const dataArr = ref([])
const url =ref('')
const srcList = ref([])
const value = ref([])
 /** 重置表单 */
 function resetFrom(){
   formData.value = {
      name:undefined,
      type:undefined
   }
 }
 /** 取消按钮 */
function cancelt() {
  checktShow.value = false;
  resett();
}
 /** 表单重置 */
function resett() {
  formt.value = {
    loan_id: undefined,
    audit: '',
    loanName: undefined,
    details: undefined
  };
  proxy.resetForm("deptRef");
}
 /**审核担保产品*/
function aduitCheck(){
   resett();
   checktShow.value = true;
   formt.value.loan_id = formData.value.id
    formt.value.loanName = `[${formData.value.id}]${formData.value.name}`
}
/** 提交按钮 */
function submitFormt() {
  proxy.$refs["depttRef"].validate(valid => {
    if (valid) {
      auditProduct(formt.value).then(response => {
          proxy.$modal.msgSuccess("审核成功");
          goBack();
        });
    }
  });
}
 /** 下一步与上一步 */
 function preStep() {
   if(active.value>0){
      active.value--
   }
 };
 function nextStep() {
   if(active.value<3){
      active.value ++
   }
};
 /** 返回 */
 function goBack() {
   proxy.$tab.closeOpenPage('audit')
 };
 watch(active, () => {
  initHandle();
})
function initHandle(){
   if(active.value == 0){
      nextText.value ='产品参数配置';
   }else if(active.value == 1){
      preText.value = '产品基本信息';
      nextText.value ='申请材料配置';
   }else if(active.value == 2){
      preText.value = '产品参数配置';
      nextText.value ='产品发布';
   }else{
      preText.value = '申请材料配置';
      nextText.value ='完成,提交发布';
   };
}
 /**获取图片信息*/
 function getImges(vl){
   if(vl){
      let arrr = vl.split(',')
      console.log(arrr)
      for(let a in arrr){
         if(arrr[a]){
            fileHttpUrl({file_path:arrr[a]}).then(res=>{
               console.log(res)
               imageUrls.value.push({
                  name: res.data[0].file_name,
                   file_path: res.data[0].file_path,
                 url: "http://" + res.data[0].http_url,
               })
            }) 
         }
      }
   }
 }
  /**参数选择*/
  function treeChange(vl){
   //预览展示
   tabNames.value=[] 
   setTimeout(()=>{
      if(valueSelect.value.length>0){
         tabNames.value =dataSelect.value.filter(item=>{
            return valueSelect.value.indexOf(item.id)!=-1
         })
         if(tabNames.value?.length>0){
            activeName.value = tabNames.value[0].id
         }else{
            activeName.value = ''
         }
      }else{
         tabNames.value=[] 
      }
   },200)
}
 /**预览切换*/
 function handleClick(){

 }

/** 详情查询*/
function getInfoProduct(){
   oneProduct(route.query.ids).then(res=>{
      let dataList = res.data;
            dataList.label = res.data.label?.split(',');
            dataList.stages = res.data.stages?.split(',');
            dataList.materials_must = res.data.materials_must=='0'?true:false;
            dataList.channel =res.data.channel?.toString();
            dataList.type =res.data.type?.toString();
            dataList.method =res.data.method?.toString()?.split(',');
            dataList.org_id =res.data.org_id?.toString()?.split(',');
            dataList.stages = dataList.stages?.map( item =>{
                  item= Number(item)
                  return item;
               })
          dataList.materials = res.data.materials.slice(1,res.data.materials.length-1).split(',')
         formData.value = dataList;
         getImges(res.data.img_path);
        getParamterInfo(res.data);
   })
}
/* 担保期**/
 function queryMonth(){
   queryMonthProduct({
      "page_size": 1,
		"page_count": 30
   }).then(res=>{
      monthList.value = res.data.list;
      getInfoProduct()
      getLoanMaterials(true);
   })
 }
 /**获取参数配置信息*/
 function getParamterInfo(vl){
   queryParameter().then(res=>{
      let treeArr =[]
      res.data.forEach(item=>{
          item.value = item.id;
          item.label = item.name;
          if(item.list?.length>0){
            item.children= item.list.map(itm=>{
               itm.value = itm.id;
               itm.label = itm.name;
               return itm
            })
          }
          treeArr.push(item)
         return
      }) 
      dataSelect.value = treeArr;
      if(vl!=''){
         valueSelect.value = vl.personal_info?.slice(1,vl.personal_info.length-1).split(',').map(item=>{
            return Number(item);
         })
         treeChange()
      }
   })
   
 }
 /**获取担保材料信息*/
 function getLoanMaterials(vl){
   listMaterial({
      page_size:1,
      page_count:100
   }).then(res=>{
   if(res.data.total_page>0){
    //先筛选出启用状态
     res.data.list.forEach(item=>{
      if( item.status == 1 ){
         dataArr.value.push({
          key:item.id.toString(),
          label:item.name,
           disabled:vl})
      }
    })
   }else{
      dataArr.value = []
   }
   
  });
 }
 queryMonth();
 
 </script>
 <style lang="scss" scoped>
 .material-title{
   font-size:15px;
   font-weight: bold; 
 }
.material-top{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #ddd;
    align-items: center;
}
.material-step{
   margin: 20px 60px;
}
.material-main{
   width:90%;
}
.material-form{
   margin: 20px;
   background-color: #fff;
   padding-bottom: 40px;
}
.replenish-title{
    background-color: rgba(255, 204, 153, 1);
    line-height: 20px;
    padding: 20px 14px;
}
.title-tag{
    font-weight: bold;
}
.apply-form{
   background: #fff;
}
.apply-state{
   background-color: rgba(255, 204, 153, 1);
   padding-left:20px ;
   line-height: 42px;
}
.productImg{
   font-weight: bold;
   font-size: 14px;
   color: #606266;
   width: 120px;
   padding-right: 10px;
   text-align: right;
}
.form-title{
   background-color:#a2a6ac ;
   line-height: 52px;
   padding-left: 20px;
   font-size: 18px;
   color:#fff;
   margin-bottom: 20px;
}
</style>
 